﻿html, body, section, aside, menu, footer, div, h2, p, ul, li, span, a
{
    margin: 0;
    padding: 0;
}
ul, li
{
    list-style: none;
}
section, aside, menu, footer
{
    display: block;
}
body
{
    font-family: georgia,times,serif;
}
a
{
    outline: 0;
    color: #05C;
}
.card
{
    position: absolute;
    width: 284px;
    min-height: 50px;
    padding: 7px;
    background: #FC3;
    border: 1px solid #FD5;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 3px 3px 5px rgba(0,0,0,.2);
    -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,.2);
    box-shadow: 3px 3px 5px rgba(0,0,0,.2);
}
.edit .card
{
    cursor: default;
}
.orange
{
    background: #F91;
    border-color: #FA3;
}
.blue
{
    background: #0AC;
    border-color: #0BC;
}
.red
{
    background: #E43;
    border-color: #E54;
}
.green
{
    background: #8C4;
    border-color: #9D6;
}
.white
{
    background: #FFF;
    border: 1px dashed #DDD;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.white:hover
{
    border-color: #AAA;
}
.drag
{
    cursor: move;
    cursor: -moz-grabbing;
    opacity: .8;
}
.pick
{
    z-index: 100;
    -moz-transform: scale(1.03);
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
    -moz-box-shadow: 8px 8px 5px rgba(0,0,0,.2);
    -webkit-box-shadow: 8px 8px 5px rgba(0,0,0,.2);
    box-shadow: 8px 8px 5px rgba(0,0,0,.2);
}
.mark .card, .edit .card
{
    opacity: .3;
}
.mark .card.mark, .edit .card.edit
{
    opacity: 1;
}
.text
{
    overflow: hidden;
    padding: 2px;
    min-height: 1em;
}
.edit > .text
{
    background: rgba(255,255,255,.5);
    outline: 1px solid #FFF;
}
.edit.white .text
{
    background: #F4F4F4;
    outline-color: #EEE;
}
.text a
{
    text-decoration: none;
}
.text a:hover
{
    border-bottom: 1px solid;
    background: rgba(255,255,255,.3);
}
.tag
{
    background: rgba(255,255,255,.4);
    padding: .1em .3em .1em .2em;
    cursor: pointer;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
}
.tag.hover
{
    background: rgba(255,255,255,.8);
}
.tag.mark
{
    background: rgba(255,255,255,.9);
    -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,.2);
    -webkit-box-shadow: none;
    box-shadow: inset 1px 1px 1px rgba(0,0,0,.2);
}
.white .tag
{
    background: #EEE;
}
.white .tag.hover, .white .tag.mark
{
    background: #DDD;
}
body > menu
{
    position: fixed;
    top: 5px;
    left: 5px;
}
.card menu
{
    position: absolute;
    top: -10px;
    right: 0;
}
.card.edit menu, .drag menu
{
    display: none;
}
.edit menu.edit
{
    display: block;
    left: 0;
}
menu a
{
    float: left;
    height: 20px;
    width: 20px;
    background: url(../img/i.png) no-repeat 2px 0;
}
menu a:hover
{
    position: relative;
    top: -2px;
    height: 22px;
}
menu a:active
{
    top: -1px;
}
menu .i
{
    background-position: 2px -20px;
}
menu .h
{
    background-position: 2px -40px;
}
menu .p
{
    background-position: 2px -60px;
}
menu .e
{
    background-position: 2px -80px;
}
menu .c
{
    background-position: 2px -100px;
}
menu .r, menu .d
{
    background-position: 2px -120px;
}
#deck
{
    position: fixed;
    top: 10px;
    left: -280px;
}
#deck .white
{
    border-color: #AAA;
}
.mark #deck, .edit #deck
{
    opacity: .3;
}
.edit #deck .card, .mark #deck .card
{
    cursor: default;
    opacity: 1;
}
footer
{
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 5px;
    font-size: .7em;
    opacity: .6;
}
footer:hover
{
    opacity: 1;
}
